<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('药占比')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-editable-css" />
    <style>
        .wrap_common {
            position: relative;
            margin: 20 auto;
            background: rgba(255, 255, 255, 1);
            overflow: hidden;
        }
        .layui-table-click {
            background-color:#F5F5F5;
            color:black;
        }
    </style>
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <input type="hidden" th:value="${idRecord}" id="idRecord">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>月度：</label>
                                <input type="text" id="month" placeholder="yyyy-MM-dd" th:value="${month}" disabled autocomplete="off">
                            </li>
                            <li>
                                <label>机构：</label>
                                <select id="dimOrg" class="form-control m-b" th:with="type=${@dimService.findDimCdAndNa('MD_DIM_ORGAN')}">
                                    <option th:each="item : ${type}" th:text="${item.value}" th:value="${item.key}" ></option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="queryTableData()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="row" style="margin-top: 105px">
                <div class="col-sm-9 wrap1 wrap_common">
                    <table id="bootstrap-table"></table>
                </div>
                <div class="col-sm-3">
                    <div style="background-color:white">
                        <h4 class="form-header h4" style="margin-top: 5px">近半年数据波动图</h4>
                        <div style="height: 400px;width: 100%;" id="chart"></div>
                        <h4 class="form-header h4">变更记录</h4>
                        <table id="recordItemTable" style="background-color:white"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: datetimepicker-js" />
     <th:block th:include="include :: bootstrap-table-export-js" />
     <th:block th:include="include :: bootstrap-table-editable-js" />
     <script th:src="@{/js/absolute_watermark.js}"></script>
    <script th:inline="javascript">
        var editData=[];
        var G_ID_APP_DATA=0;
        function submitHandler() {
            $.modal.close();
        }
        function queryTableData() {
            $.ajax({
                url: '/etl/check/record/queryCheckData?idRecord='+$("#idRecord").val()+"&month="+$("#month").val(),
                beforeSend: function(request) {
                    request.setRequestHeader("token",sessionStorage.getItem("token"));
                },
                type: 'get',
                success: function (result) {
                    if(result.code==0) {
                        var data = result.data;
                        var mycolumns=[];
                        $.each(data.thead,function (index,item) {
                            var editable = false;
                            mycolumns.push({
                                field: index,
                                title: item,
                                editable: editable
                            });
                        });
                        var options = {
                            showSearch: false,
                            showRefresh: false,
                            showToggle: false,
                            showColumns: true,
                            showExport: true,
                            pagination: false,
                            exportDataType: 'all', // 导出选择数据
                            exportTypes: ['excel'], // 导出的文件类型
                            onEditableSave: onEditableSave,
                            onClickRow: onClickRow,
                            exportOptions: {
                                fileName: '数据核对',    // 文件名称设置
                            },
                            columns: mycolumns,
                            data:data.tbody
                        };
                        $.table.destroy();
                        $.table.init(options);
                    }
                }
            });
            $("#dimMonth").datetimepicker({
                format: "yyyy-mm",
                startView: 3,
                minView: 3,
                autoclose: true
            });
        };
        function onClickRow(row, $element){
            $element.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            G_ID_APP_DATA = row['ID'];
            $("#recordItemTable").bootstrapTable('destroy');
            loadLogDetail();
        }
        function onEditableSave (field, row, rowIndex, oldValue, $el) {
            editData.push({"idRecord":$("#idRecord").val(),"oldVal":oldValue,"newVal":row[field],"idData":row[id]});
        }
        function loadLogDetail() {
            $('#recordItemTable').bootstrapTable({
                url: "/etl/check/record/item/queryByIdRecord?idData="+G_ID_APP_DATA+"&idRecord="+$("#idRecord").val(),
                method:"get",
                pagination: true,
                search: false,
                showRefresh: false,
                columns: [{
                    field: 'idRecordItem',
                    title: '主键',
                    visible: false
                },
                    {
                        field: 'idRecord',
                        title: '外键',
                        visible: false
                    },
                    {
                        field: 'oldVal',
                        title: '原值'
                    },
                    {
                        field: 'newVal',
                        title: '修订值',
                        sortable: true
                    },
                    {
                        field: 'naEmpCre',
                        title: '修订人'
                    }]
            });
        }
        $(function() {
            queryTableData();
            loadLogDetail();
        });
    </script>
</body>
</html>